<template>
  <div class="content">
    <div class="top">
      <div>
        <div class="tit">网关在线情况</div>
        <div class="num">125 <span style="font-family: none">(25)</span></div>
      </div>
      <div>
        <div class="tit">网关在线情况</div>
        <div class="num">125 <span style="font-family: none">(25)</span></div>
      </div>
    </div>
    <div class="bottom">
      <div>
        <div class="circle" />
        <el-progress type="circle" width="147" height="147" :percentage="88" stroke-width="18" color="red" />
        <svg width="100%" height="100%">
          <defs>
            <linearGradient
              id="blue1"
              x1="0%"
              y1="0%"
              x2="100%"
              y2="0%"
            >
              <stop
                offset="0%"
                style="
                                stop-color: rgba(55, 84, 232, 0.7);
                                stop-opacity: 1;
                            "
              />
              <stop
                offset="100%"
                style="
                                stop-color: rgba(0, 255, 252, 1);
                                stop-opacity: 0.7;
                            "
              />
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div>
        <div class="circle" />
        <el-progress class="test" type="circle" width="147" height="147" :percentage="88" stroke-width="18" color="red" />
        <svg width="100%" height="100%">
          <defs>
            <linearGradient
              id="blue2"
              x1="0%"
              y1="0%"
              x2="100%"
              y2="0%"
            >
              <stop
                offset="0%"
                style="
                                stop-color: rgba(214, 164, 255, 0.7);
                                stop-opacity: 1;
                            "
              />
              <stop
                offset="100%"
                style="
                                stop-color: rgba(0, 255, 252, 1);
                                stop-opacity: 0.7;
                            "
              />
            </linearGradient>
          </defs>
        </svg>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
    display: flex;
    height: 100%;
    padding-top: 10%;
    flex-direction: column;

    .bottom {
        flex: 1;
        display: flex;
        width: 100%;
        height: 20%;
        justify-content: center;
        align-items: center;
        > div {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: .2vh;
            height: 100%;
            position: relative;
            .el-progress {
                position: absolute;
                top:45%;
                left:50%;
                transform: translate(-50%,-50%);
            }
            .circle {
                background: #095370;
                position: absolute;
                top:45%;
                left:50%;
                transform: translate(-50%,-50%);
                opacity: .5;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 165px;
                height: 165px;
                border-radius: 50%;
            }
        }
    }

    .top {
        display: flex;
        width: 100%;
        height: 23%;
        justify-content: center;
        align-items: center;
        > div {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            height: 100%;
            .tit {
                color: #fff;
                font-size: 1.7vh;
            }
            .num {
                font-size: 2.5vh;
                font-family: 'bigfont';
                text-shadow: 0 0 0.5em #078792, 0 0 0.5em #078792;
            }
        }
    }
}
</style>
